<template>
  <div class="faq-container">
    <van-nav-bar
        title=""
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />
    <h1 class="faq-title">常见问题</h1>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="1、如何申请退款？">
        <p>这里填写如何申请退款的具体内容。</p>
      </el-collapse-item>
      <el-collapse-item title="2、申请了退款，钱款退回到了那里？">
        <p>这里填写钱款退回位置的相关内容。</p>
      </el-collapse-item>
      <el-collapse-item title="3、商品退货了，谁承担运费？">
        <p>亲，平台运费规则秉承“谁过错，谁承担”的原则，如非商家或者物流问题，建议您联系商家协商处理，售后，退货运费需要您自行承担；如商品存在质量问题、商家发错货等情况，退货运费由商家承担。为了更好的保障您的权益，请您保留好相关凭证，退货运流费用麻烦您先垫付，不要使用到付，待商家收到您寄回的商品，退款成功后，您可以凭借凭证联系商家处理~</p>
      </el-collapse-item>
      <el-collapse-item title="4、付款后订单显示待付款？">
        <p>这里填写付款后订单显示待付款相关内容。</p>
      </el-collapse-item>
    </el-collapse>
    <div v-if="!hasMore" class="no-more">没有更多了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      hasMore: false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/wode')
    }
  }
}
</script>

<style scoped>
.faq-container {
         width: 80%;
         margin: 20px auto;
       }

.faq-title {
         text-align: center;
         font-size: 24px;
         margin-bottom: 20px;
         color: #333; /* 标题颜色为深灰色 */
       }

.el-collapse-item__header {
                   color: #FF9800; /* 问题标题颜色为中灰色 */
                 }

.el-collapse-item__content p {
                   color: #999; /* 问题答案内容颜色为浅灰色 */
                 }

.no-more {
        text-align: center;
        color: #999;
        margin-top: 20px;
      }
</style>
